<template>
  <div>
    <van-col @click="startLearn"
      ><div class="learn_image">
        <van-image width="80" height="80" :src="imagePath"></van-image>
        <div class="learn_text">{{ learnItem }}</div>
      </div></van-col
    >
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具 js，第三方插件 js，json 文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import { Notify } from "vant";
import selfTestApi from "@/api/selfTest/index";
export default {
  //import 引入的组件需要注入到对象中才能使用
  components: {},
  props: {
    learnItem: {
      type: String,
      default: "顺序练习",
    },
    imagePath: String,
    selectValue: Number,
  },
  data() {
    //这里存放数据
    return {};
  },
  //计算属性 类似于 data 概念
  computed: {},
  //监控 data 中的数据变化
  watch: {},
  //方法集合
  methods: {
    startLearn() {
      //如果什么课程也不选，则不能进行任何操作
      if (this.selectValue == -1) {
        Notify({ type: "danger", message: "请先选择学习的课程" });
        return;
      }
      //如果不是自我测试或者回顾试卷，就是顺序练习或者随机练习或者收藏练习或者错题练习
      if (this.learnItem != "自我测试" && this.learnItem != "回顾试卷") {
        this.$router.push({
          path: "/learn/learn",
          query: { type: this.learnItem, selectedId: this.selectValue },
        });
      } else {
        //否则就是自我测试或者回顾试卷
        if (this.learnItem == "自我测试") {
          this.$emit("custom-event", "自我测试");
        } else {
          //如果不是自我测试就是回顾试卷
          this.$emit("custom-event", "回顾试卷");
        }
      }
    },
    /**
     * 自我测试，获取试卷编号
     * @param {出题数量} testNum
     */
    seftTest(testNum) {
      selfTestApi.batchInsert(this.selectValue, testNum).then((res) => {
        if (res.data) {
          this.$router.push({
            path: `/test/test`,
            query: { questionItemId: res.data, type: "selfTest" },
          });
        }
      });
    },
  },
  //生命周期 - 创建完成（可以访问当前 this 实例）
  created() {},
  //生命周期 - 挂载完成（可以访问 DOM 元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有 keep-alive 缓存功能，这个函数会触发
};
</script>
<style scoped>
.learn_image {
  display: flex;
  margin-left: 30px;
  margin-right: 30px;
  margin-top: 20px;
  justify-content: center;
  flex-direction: column;
}
.learn_text {
  display: flex;
  color: rgb(99, 102, 101);
  justify-content: center;
}
</style>